<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="终端分拨">
      <view class="u-m-r-20" slot="right" @click="goRecord()"> 记录 </view>
    </u-navbar>
    <view class="flex terminal-state__header">
      <view class="flex-2" v-if="checked == 0">
        <u-search
          placeholder="请输入终端活机器sn号"
          v-model="requstBody.beginSn"
          shape="square"
          bg-color="#f6f6f6"
          :show-action="false"
          @search="goSearch(0)"
        ></u-search>
      </view>
      <view class="flex-2 flex" v-else>
        <u-search
          class="u-margin-right-10"
          placeholder="起始SN号"
          v-model="requstTwoBody.beginSn"
          shape="square"
          bg-color="#f6f6f6"
          :show-action="false"
          @search="goSearch(1)"
        ></u-search>
        <u-search
          class="u-margin-left-10"
          placeholder="结束SN号"
          v-model="requstTwoBody.endSn"
          shape="square"
          bg-color="#f6f6f6"
          :show-action="false"
          @search="goSearch(2)"
        >
        </u-search>
      </view>
      <view class="u-margin-left-20 u-margin-top-10" @click="triggleDrop"
        >{{ typeFilter[checked].label }}
        <u-icon name="arrow-down-fill" size="28"></u-icon>
      </view>
    </view>
    <scroll-view
      class="home__grid-group mt-200"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="terminal-state__item flex align-center"
          v-for="(item, index) in terminalList"
          :key="index"
          @click="itemSelect(item)"
        >
          <view class="u-margin-right-20 u-padding-20">
            <u-image
              width="40rpx"
              height="40rpx"
              :src="item.showRemove ? thumbSelect : thumb"
            ></u-image>
          </view>
          <view class="">
            <view class="flex">
              <!-- <u-image :src="thumb" width="40" height="40" class="card__icon mr-10"></u-image> -->
              <view class=""> 终端SN：{{ item.sn }} </view>
            </view>
            <view class="flex u-margin-top-20">
              <view class=""> 活动: </view>
              <view class="">
                {{ item.activityName }}
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>

    <view class="fixed u-padding-20 flex align-center">
      <view class="flex flex-2" @click="allSelect()">
        <u-image
          class="u-margin-right-10"
          width="40rpx"
          height="40rpx"
          :src="allSelected ? thumbSelect : thumb"
        ></u-image
        >全选
      </view>
      <u-button
        type="primary"
        class="flex-1 u-margin-left-15"
        :custom-style="customSubmitStyle"
        hover-class="false"
        @click="submitAllocate()"
        >分拨选择</u-button
      >
    </view>

    <u-popup v-model="showPopup" mode="top" class="pop_filter">
      <view>
        <view class="pop_filter__title u-margin-left-20"> 选择类型 </view>
        <view class="flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            :class="{ pop_filter__select: checked === index }"
            v-for="(item, index) in typeFilter"
            :key="index"
            @click="selectBtn('1', index)"
          >
            {{ item.label }}
          </view>
        </view>

        <view class="flex u-margin-20 u-padding-top-20">
          <u-button
            type="primary"
            class="flex-1 u-m-r-15"
            :custom-style="customCancelStyle"
            hover-class="false"
            @click="cancel()"
            >重置</u-button
          >
          <u-button
            type="primary"
            class="flex-1 u-margin-left-15"
            :custom-style="customSubmitStyle"
            hover-class="false"
            @click="submitFilter()"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      customCancelStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#f6f6f6',
        color: 'black',
      },
      customSubmitStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
        color: 'white',
      },
      src: '/static/image/home/icon_scan.png',
      thumb: '/static/image/home/icon_check_default.png',
      thumbSelect: '/static/image/home/icon_check_checked.png',
      pageNo: 1,
      pageSize: '10',
      requstBody: {
        beginSn: '',
      },
      requstTwoBody: {
        beginSn: '',
        endSn: '',
      },
      terminalList: [],
      scrollTop: 0,
      status: 'loadmore',
      typeFilter: [
        {
          label: '按查询',
          value: '0',
        },
        {
          label: '按号段',
          value: '1',
        },
      ],
      showPopup: false,
      checked: 0,
      allSelected: false,
    };
  },
  // 滚动到底部触发页面，
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.terminalInfoQueryIssueList();
  },
  methods: {
    submitAllocate() {
      let sn = '';
      let num = 0;
      this.terminalList.find((data, _index) => {
        if (data.showRemove) {
          sn += data.sn;
          num += 1;
        }
      });
      if (sn == '') {
        uni.$zx.msg('请选择终端', {
          duration: 2000,
        });
        return;
      }
      this.$u.route('pages/main/terminal/terminalAllocatedSelect', {
        sn: sn,
        size: num,
      });
    },
    allSelect() {
      this.allSelected = !this.allSelected;
      this.terminalList.find((data, _index) => {
        data.showRemove = true;
      });
    },
    itemSelect(item) {
      if (item.showRemove == null || !item.showRemove) {
        item.showRemove = true;
      } else {
        item.showRemove = false;
      }
    },
    goSearch(num) {
      const _that = this;
      _that.pageNo = 1;
      _that.terminalList = [];
      _that.terminalInfoQueryIssueList();
    },
    selectBtn(type, index) {
      if (type == '1') {
        this.checked = index;
      }
    },
    cancel() {
      const _that = this;
      _that.checked = 0;
    },
    submitFilter() {
      const _that = this;
      _that.pageNo = 1;
      _that.terminalList = [];
      _that.requstBody.beginSn = null;
      _that.requstTwoBody.beginSn = null;
      _that.requstTwoBody.endSn = null;
      _that.terminalInfoQueryIssueList();
      _that.showPopup = false;
    },
    triggleDrop() {
      this.showPopup = !this.showPopup;
    },
    goRecord() {
      this.$u.route('pages/main/terminal/terminalIssueRecordList', {
        type: '1',
      });
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.terminalInfoQueryIssueList();
    },
    terminalInfoQueryIssueList() {
      let param = {};
      let _that = this;
      param = _that.checked == 0 ? _that.requstBody : _that.requstTwoBody;
      _that.$zx.terminal_api
        .terminalInfoQueryIssueList(this.pageNo, this.pageSize, param)
        .then((data) => {
          console.log('terminalInfoQueryIssueList----->270', data);
          _that.terminalList = _that.terminalList.concat(data);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }

  &__item {
    background-color: white;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
  }
}

.pop_filter {
  position: absolute;
  top: 180rpx;

  &__title {
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
  }

  &__btn {
    background-color: #f6f6f6;
    width: 180rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__input {
    background-color: #f6f6f6;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__select {
    background-color: #f1e8ff;
    color: #9d60ff;
    background-image: url('../../../static/image/home/icon_filter_checked.png');
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}

.fixed {
  width: 100%;
  height: 150rpx;
  background-color: white;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
</style>
